<template>
    <div>
        <el-row class="bg-top">
            <el-col :span="24">
                <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                    <el-form-item label="查询时间">
                        <el-date-picker v-model="dataForm.startTime" popper-class="eventTime"
                            value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime"
                            :picker-options="pickerOptions0" placeholder="开始时间" @change="startTimeChange"></el-date-picker>
                        <span class="queryText">至</span>
                        <el-date-picker v-model="dataForm.endTime" popper-class="eventTime" value-format="yyyy-MM-dd HH:mm"
                            format="yyyy-MM-dd HH:mm" type="datetime" :picker-options="pickerOptions1" placeholder="结束时间"
                            @change="endTimeChange"></el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="DCU编号：" >
                       <el-select v-model="dataForm.DCU"  filterable clearable placeholder="请选择DCU编号" @change="changeDCU()">
                         <el-option v-for="(item,index) in DCUoptions"  :key="item.dcu" :label="item.dcu" :value="item.dcu"></el-option>
                       </el-select>
                     </el-form-item> -->
                    <el-form-item label="站台侧">
                        <el-select v-model="dataForm.stationSlide" filterable clearable placeholder="请选择站台侧">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getDataList()">搜索</el-button>
                        <el-button type="info" @click="reset()">重置</el-button>
						<!-- <el-button type="info" v-loading.fullscreen.lock="fullscreenLoading"
							@click="exportHandleNew()">{{ $t('export') }}</el-button> -->
                    </el-form-item>
                </el-form>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="bg-bottom">
            <el-col :span="24" class="titleContent">
                <span class="titleText">事件状态记录列表</span>
                <div class="print" @click="printTable()">
                    <img src="../../../assets/img/dayinji.png" alt="">
                    <span>打印</span>
                </div>
            </el-col>
            <el-table ref="multipleTable" v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
                <el-table-column type="selection" header-align="center" align="center"></el-table-column>
                <el-table-column prop="lineName" label="所属线路" header-align="center" align="center"></el-table-column>
                <el-table-column prop="stationName" label="站点名称" header-align="center" align="center"></el-table-column>
                <el-table-column prop="stationSlide" label="站台侧" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.stationSlide === 'up'">上行</span>
                        <span v-if="scope.row.stationSlide === 'down'">下行</span>
                    </template>
                </el-table-column>
                 <el-table-column prop="systemAb" label="A系/B系" header-align="center" align="center"></el-table-column>
                <el-table-column prop="createDate" label="发生时间" header-align="center" align="center"
                    width="180"></el-table-column>
                <el-table-column prop="endDate" label="截止时间" header-align="center" align="center"
                    width="180"></el-table-column>
                <el-table-column prop="detail" label="操作信息" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.doorNo">
                            <div v-if="scope.row.stationSlide === 'up'">
                                <span>{{ scope.row.doorNo }}{{ scope.row.detail }}</span>
                            </div>
                            <div v-if="scope.row.stationSlide === 'down'">
                                 <span >{{scope.row.doorNo}}{{ scope.row.detail }}</span>
                            </div>
                        </span>
                        <span v-else>{{ scope.row.detail }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="24" style="position:relative">
                <div class="export">
                    <!-- <el-checkbox v-model="checked" @change="toggleSelection(tableData)">全选</el-checkbox> -->
                    <span class="textColor" v-loading.fullscreen.lock="fullscreenLoading"
                        @click="exportHandleNew()">批量导出</span>
                </div>
                <el-pagination background :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
                    :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
                </el-pagination>
            </el-col>

        </el-row>
		<uploadTime ref="uploadTime" v-if="uploadTimeStatus"></uploadTime>
    </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import printJS from 'print-js'
import utils from '@/utils/utils'
import { getOrder } from "@/utils";
import uploadTime from "@/components/uploadTime"
export default {
    mixins: [mixinViewModule],
	components: {
		uploadTime
	},
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: '/psc/eventlog/page',
                getDataListIsPage: true,
                activatedIsNeed: true,
                exportURL: '/psc/eventlog/export'
                // deleteURL: '',
                // deleteIsBatch: false
            },
            options: utils.eventStationSide,
            DCUoptions: [],
            doorListup: [],//上行门数组
            doorListdown: [],//下行门数组
            checked: false,
            dataForm: {
                startTime: '',
                endTime: '',
                stationSlide: '',
            },
            pickerOptions0: {//结束时间不能大于开始时间
                disabledDate: (time) => {
                    if (this.dataForm.endTime) {
                        // 存在结束时间
                        return time.getTime() > new Date(this.dataForm.endTime).getTime();
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    if (this.dataForm.startTime) {
                        return time.getTime() < new Date(this.dataForm.startTime).getTime() - 24 * 3600 * 1000;//可以选择同一天
                    }
                }
            },
			uploadTimeStatus:false
        }
    },
    activated() {
        this.init()
    },
    methods: {
		exportHandleNew() {
			this.uploadTimeStatus = true
			this.$nextTick(() => {
				this.$refs.uploadTime.init(this.dataForm, this.mixinViewModuleOptions.exportURL)
			})
		},
        //开始时间显示
        startTimeChange() {
            let startTime = new Date(this.dataForm.startTime).getTime();
            let endTime = new Date(this.dataForm.endTime).getTime();
            if (endTime <= startTime && endTime !== '' && endTime !== 0 && startTime !== '' && startTime !== 0) {
                this.$message.error("开始时间不能大于结束时间")
                this.dataForm.startTime = ''
            }
        },
        //结束时间显示
        endTimeChange() {
            let startTime = new Date(this.dataForm.startTime).getTime();
            let endTime = new Date(this.dataForm.endTime).getTime();
            if (endTime <= startTime && startTime !== '' && startTime !== 0 && endTime !== '' && endTime !== 0) {
                this.$message.error("结束时间不能小于或等于开始时间")
                this.dataForm.endTime = ''
            }
        },
        init() {
            this.getdoorList()

        },
        //改变站台测的上下行
        changeStation() {
            // this.getdoorList()
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //获取单门的列表
        getdoorList() {
            this.doorListup = []
            this.doorListdown = []
            this.$http.get('/psc/door/getDoor').then(res => {
                res.data.data.up.forEach(item => {
                    if (item.doorType == 1) {
                        this.doorListup.push(item)
                    }
                })
                res.data.data.down.forEach(item => {
                    if (item.doorType == 1) {
                        this.doorListdown.push(item)
                    }
                })
				if(getOrder(res.data.data.up)==1){
					this.doorListup.reverse()
				}
				if(getOrder(res.data.data.down)==1){
					 this.doorListdown.reverse() //下行数据得倒叙
				}
            })
        },
        reset() {
            this.dataForm = {}
            this.$http.get('/psc/eventlog/page').then((res) => {
                this.dataList = res.data.data.list
                this.total = res.data.data.total
            })
        },
        //打印表格
        printTable() {
            this.$http.get(`/psc/eventlog/page?limit=${this.total}`).then(res => {
                let data = [];
                for (let i = 0; i < res.data.data.list.length; i++) {
                    data.push({
                        field1: i + 1,
                        field2: res.data.data.list[i].lineName,
                        field3: res.data.data.list[i].stationName,
                        field4: res.data.data.list[i].stationSlide === 'up' ? '上行' : '下行',
                        field5: res.data.data.list[i].systemAb,
                        field6: res.data.data.list[i].createDate,
                        field7: res.data.data.list[i].endDate,
                        field8: res.data.data.list[i].detail,
                        
                    })
                }
                printJS({
                    printable: data,
                    properties: [{
                        field: 'field1',
                        displayName: '序号',
                        columnSize: 1
                    }, {
                        field: 'field2',
                        displayName: '所属线路',
                        columnSize: 1
                    }, {
                        field: 'field3',
                        displayName: '站点名称',
                        columnSize: 1
                    }, {
                        field: 'field4',
                        displayName: '站台侧',
                        columnSize: 1
                    }, {
                        field: 'field5',
                        displayName: 'A系/B系',
                        columnSize: 1
                    }, {
                        field: 'field6',
                        displayName: '发生时间',
                        columnSize: 1
                    }, {
                        field: 'field7',
                        displayName: '截止时间',
                        columnSize: 1
                    }, {
                        field: 'field8',
                        displayName: '操作信息',
                        columnSize: 1
                    }],
                    type: 'json',
                    header: '事件状态记录',
                    //样式设置
                    gridStyle: 'border:2px solid #000000; text-align:center',
                    gridHeaderStyle: 'color:#000000; border:2px solid #000000;'
                })
            }).catch(function (error) { // 请求失败处理
            });
        }
    },
}
</script>

<style scoped>
.bg-top {
    height: 7.6vh;
    min-height: 76px;
    /* padding: 20px 1.8vw; */
    border-radius: 10px;
    /* padding: 2.5vh 1.4vw 1.8vh 1.4vw; */
    padding: 0 1.8vw;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.bg-top>>>.el-form--inline .el-form-item__content,
.el-form--inline .el-form-item {
    vertical-align: middle !important;
}

.bg-top>>>.el-form-item {
    margin-bottom: 0;
}

.el-form-item {
    margin-bottom: 0;
}

.queryText {
    display: inline-block;
    margin: 0 0.5vw;
}

.bg-bottom {
    /* height: 75.7vh; */
    margin-top: 1.8vh;
    padding: 2.7vh 1.87vw 1.85vh 1vw;
    border-radius: 10px;
    background-color: #fff;
}

.titleContent {
    display: flex;
    position: relative;
    height: 3.7vh;
    margin-bottom: 1.5vh
}

.titleText {
    height: 3.7vh;
    line-height: 3.7vh;
    font-size: 16px;
    display: inline-block;
}

.print {
    position: absolute;
    right: 0;
    top: 1.1vh;
    cursor: pointer;
}

.print img {
    margin-right: 0.26vw;
}

.print span {
    font-size: 14px;
    color: #279EFB;
}

.export {
    position: absolute;
    top: 1.85vh;
    width: 11vw;
    height: 1.85vh;
    font-size: 14px;
}

.export .textColor {
    color: #279EFB;
    margin-left: 0.5vw;
    cursor: pointer;
}</style>